<html>
<head>
<!-- Based on a WebGL tutorial at http://learningwebgl.com/lessons/lesson05/index.html -->
<title>Solving Laplace Equation with WebGL</title>
<script id="shader-fs-laplace" type="x-shader/x-fragment">
precision highp float;
precision highp int;

varying vec2 vTextureCoord;

uniform highp sampler2D uSampler;
uniform int uTexSize;

void main(void)
{
    float delta = 1.0 / float(uTexSize);
    vec2 d1 = vTextureCoord - vec2(0.25, 0.5);
    vec2 d2 = vTextureCoord - vec2(0.75, 0.5);
    float dist1sq = dot(d1, d1);
    float dist2sq = dot(d2, d2);
	
    if (dist1sq < 0.1 * 0.1) {
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    } else if (dist2sq < 0.1 * 0.1) {
        gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
    } else {
		vec4 wc = texture2D(uSampler, vec2(vTextureCoord.s - delta, vTextureCoord.t));
		vec4 ec = texture2D(uSampler, vec2(vTextureCoord.s + delta, vTextureCoord.t));
		vec4 sc = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t - delta));
		vec4 nc = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t + delta));
        float val = (wc.r + ec.r + nc.r + sc.r) / 4.0 +
			(wc.g + ec.g + nc.g + sc.g) / (4.0 * 255.0);
		float hi = val - mod(val, 1.0 / 255.0);
		val = (val - hi) * 255.0;
		float lo = val;
        gl_FragColor = vec4(hi, lo, 0.0, 1.0);
    }
}
</script>
<script id="shader-fs-straight" type="x-shader/x-fragment">
precision highp float;
precision highp int;

varying vec2 vTextureCoord;

uniform highp sampler2D uSampler;
uniform int uTexSize;


void main(void)
{
	vec4 src = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
	float brightness = src.r;
	gl_FragColor = vec4(brightness, brightness, brightness, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;

varying vec2 vTextureCoord;

void main(void)
{
    gl_Position = vec4(aVertexPosition, 1.0);
    vTextureCoord = aTextureCoord;
}
</script>
<script type="text/javascript">
var START_N = 8;
var ITERS_OVER_N = 10;
var MAX_N = 512;

var gl;
function initGL(canvas) {
    gl = canvas.getContext("experimental-webgl");
    gl.viewportWidth = canvas.width;
    gl.viewportHeight = canvas.height;
}

function getShader(gl, id) {
    var shaderScript = document.getElementById(id);
    var str = "";
    var k = shaderScript.firstChild;
    while (k) {
        if (k.nodeType == 3) {
            str += k.textContent;
        }
        k = k.nextSibling;
    }

    var shader;
    if (shaderScript.type == "x-shader/x-fragment") {
        shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else if (shaderScript.type == "x-shader/x-vertex") {
        shader = gl.createShader(gl.VERTEX_SHADER);
    } else {
        return null;
    }

    gl.shaderSource(shader, str);
    gl.compileShader(shader);

    return shader;
}

var laplaceProgram, straightProgram;
function initShaders() {
    var laplaceFragShader = getShader(gl, "shader-fs-laplace");
    var straightFragShader = getShader(gl, "shader-fs-straight");
    var vertexShader = getShader(gl, "shader-vs");

    laplaceProgram = gl.createProgram();
    gl.attachShader(laplaceProgram, vertexShader);
    gl.attachShader(laplaceProgram, laplaceFragShader);
    gl.linkProgram(laplaceProgram);

    laplaceProgram.vertexPositionAttribute = gl.getAttribLocation(laplaceProgram, "aVertexPosition");
    gl.enableVertexAttribArray(laplaceProgram.vertexPositionAttribute);
    laplaceProgram.textureCoordAttribute = gl.getAttribLocation(laplaceProgram, "aTextureCoord");
    gl.enableVertexAttribArray(laplaceProgram.textureCoordAttribute);
    laplaceProgram.samplerUniform = gl.getUniformLocation(laplaceProgram, "uSampler");
    laplaceProgram.texSizeUniform = gl.getUniformLocation(laplaceProgram, "uTexSize");
    
    straightProgram = gl.createProgram();
    gl.attachShader(straightProgram, vertexShader);
    gl.attachShader(straightProgram, straightFragShader);
    gl.linkProgram(straightProgram);

    straightProgram.vertexPositionAttribute = gl.getAttribLocation(straightProgram, "aVertexPosition");
    gl.enableVertexAttribArray(straightProgram.vertexPositionAttribute);
    straightProgram.textureCoordAttribute = gl.getAttribLocation(straightProgram, "aTextureCoord");
    gl.enableVertexAttribArray(straightProgram.textureCoordAttribute);
    straightProgram.samplerUniform = gl.getUniformLocation(straightProgram, "uSampler");
    straightProgram.texSizeUniform = gl.getUniformLocation(straightProgram, "uTexSize");
}

var rttFramebuffer;
var rttTexture;
var rttTexture2;
function initTextureFramebuffer(n) {
    rttFramebuffer = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);
    rttFramebuffer.width = n;
    rttFramebuffer.height = n;

    rttTexture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, rttTexture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT );
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT );
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, rttFramebuffer.width, rttFramebuffer.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);

    var renderbuffer = gl.createRenderbuffer();
    gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
    gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, rttFramebuffer.width, rttFramebuffer.height);

    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, rttTexture, 0);
    gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuffer);
  
    rttTexture2 = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, rttTexture2);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT );
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT );
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, rttFramebuffer.width, rttFramebuffer.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
    
    gl.bindTexture(gl.TEXTURE_2D, null);
    gl.bindRenderbuffer(gl.RENDERBUFFER, null);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
}

function updateTextureFramebuffer(n) {
    var oldTex = rttTexture2;
    
    initTextureFramebuffer(n);
    
    var newTex = rttTexture2;
    rttTexture2 = oldTex;
    
    updateState();
    
    rttTexture = newTex;
}

var cubeVertexPositionBuffer;
var cubeVertexTextureCoordBuffer;
var cubeVertexIndexBuffer;
function initBuffers() {
    cubeVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
    vertices = [
        // Front face
        -1.0, -1.0,  1.0,
         1.0, -1.0,  1.0,
         1.0,  1.0,  1.0,
        -1.0,  1.0,  1.0,
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    cubeVertexPositionBuffer.itemSize = 3;
    cubeVertexPositionBuffer.numItems = 4;

    cubeVertexTextureCoordBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
    var textureCoords = [
        // Front face
        0.0, 0.0,
        1.0, 0.0,
        1.0, 1.0,
        0.0, 1.0,
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
    cubeVertexTextureCoordBuffer.itemSize = 2;
    cubeVertexTextureCoordBuffer.numItems = 4;

    cubeVertexIndexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
    var cubeVertexIndices = [
        0, 1, 2, 0, 2, 3,    // Front face
    ]
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
    cubeVertexIndexBuffer.itemSize = 1;
    cubeVertexIndexBuffer.numItems = 6;
}

function updateState() {
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.useProgram(laplaceProgram);
    gl.uniform1i(laplaceProgram.texSizeUniform, rttFramebuffer.width);
    
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
    gl.vertexAttribPointer(laplaceProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
    gl.vertexAttribPointer(laplaceProgram.textureCoordAttribute, cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
    
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, rttTexture2);
    gl.uniform1i(laplaceProgram.samplerUniform, 0);
    
    gl.bindFramebuffer(gl.FRAMEBUFFER, rttFramebuffer);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, rttTexture, 0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    
    var t = rttTexture2;
    rttTexture2 = rttTexture;
    rttTexture = t;
}

function drawScene() {
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.useProgram(straightProgram);
    gl.uniform1i(straightProgram.texSizeUniform, rttFramebuffer.width);
    
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
}

var iterNum = 0;
var n = START_N;
function tick() {
    if (iterNum > 0 && iterNum % (n * ITERS_OVER_N) == 0 && n * 2 <= MAX_N) {
        n *= 2;
        updateTextureFramebuffer(n);
    }
    updateState();
    drawScene();
    iterNum++;
}

function webGLStart() {
    var canvas = document.getElementById("lesson05-canvas");
    initGL(canvas);
    initShaders();
    initBuffers();
    initTextureFramebuffer(START_N);

    setInterval(tick, 0);
}
</script>
</head>
<body onload="webGLStart();">
  <canvas id="lesson05-canvas" style="border: none;" width="512" height="512"></canvas>
</body>
</html>
